<template>
  <div>
    <el-col :span="8">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button style="float: right; padding: 3px 0" type="text" @click="toLogin">登录</el-button>
        </div>
        <el-form ref="form1" :model="form" :rules="rules">
          <el-form-item prop="name" label="用户名：" label-width="100px">
            <el-input prefix-icon="el-icon-user" v-model="form.name"/>
          </el-form-item>
          <el-form-item prop="password" label="密码：" label-width="100px">
            <el-input :type="showPass ? 'text' : 'password'" prefix-icon="el-icon-lock" v-model="form.password" ></el-input>
            <i :class="showPass? icon1: icon2" style="position: absolute; right: 1rem; top: 1rem;" @click="showPass=!showPass"></i>
          </el-form-item>
          <el-form-item label="确认密码：" label-width="100px" prop="repassword">
            <el-input type="password" prefix-icon="el-icon-lock" v-model="form.repassword" @keyup.enter.native="submitForm('form1')"/>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="submitForm('form1')">注册</el-button>
            <el-button type="primary" @click="resetForm('form1')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </div>
</template>

<script>
  export default {
    data() {
      let validateRepass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入确认密码'))
        } else if (value !== this.form.password) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      }
      return {
        form: {
          name: '',
          password: '',
          repassword: '',
        },
        showPass: false,
        status: 'login',
        icon1: 'glyphicon glyphicon-eye-open',
        icon2: 'glyphicon glyphicon-eye-close',
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 4, message: '长度在 3 到 4 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 3, max: 4, message: '长度在4~8位', trigger: 'blur'}
          ],
          repassword: [
            {required: true, message: '请输入确认密码', trigger: 'blur'},
            {validator: validateRepass, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      // 切换到登录页面
      toLogin() {
        this.$router.push({path: '/login'})
      },

      // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.register()
          } else {
            this.$message.warning('请填写正确完整的信息！')
            return false;
          }
        })
      },

      // 点击注册按钮，发送请求
      register() {
        this.$http.post('/user/reg', this.$qs.stringify({
          name: this.form.name,
          password: this.form.password
        })).then(response => {
          if(response.data.hasOwnProperty('error')) {
            this.$message.error(response.data[error])
          } else if(response.data.hasOwnProperty('success')) {
            this.$message.success('注册成功，请登录')
            this.$router.push('/login')
          } else {
          }
        }).catch(err => {
          this.$message.warning('注册失败了')
        })

      },

      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      // 检查两次输入的密码是否一致
      checkPassword() {
        if (this.form.password != this.form.repassword) {
          this.$message.warning("两次密码不一致");
          return false;
        }
        return true;
      }
    }
  }
</script>

<style>
  .eye-icon {
    width: 20px;
    height: 20px;
    right: -5px;
  }
</style>
